<template>
  <a-spin class="loadComponent" :tip="tip" :indicator="indicator" :spinning="spinning">
    <slot></slot>
  </a-spin>
</template>

<script setup>
import { h, defineProps } from 'vue'
import { LoadingOutlined } from '@ant-design/icons-vue'
const props = defineProps({
  spinning: {
    type: Boolean,
    default: false
  },
  tip: {
    type: String,
    default: '加载中...'
  }
})
const indicator = h(LoadingOutlined, {
  style: {
    fontSize: '48px',
    color: 'green'
  },
  spin: true
})
// Define a prop or a reactive variable to control the loading state
// This should be passed or controlled from the parent component
</script>

<style>
.loadComponent.ant-spin .ant-spin-text {
  top: 64% !important;
  color: green;
}
</style>
